<template>
	<view>
		<view class="list">
			<view class="flex_col" v-for="(item,index) in balanceList" :key="index" :data-index="index">
				<view style="padding-right: 40upx"><text class="balance-inc" :style="item.delta < 0? 'color:#00CDCD':''">{{ (item.delta > 0 ? '+' : '') + item.delta }}</text></view>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.description}}</view>
						<view class="time">{{item.gmtCreate | dateFormat}}</view>
					</view>
					<view v-if="item.orderNo" class="info">订单号: {{item.orderNo}}</view>
					<view class="info">{{item.info}}</view>
				</view>
			</view>
		</view>
		<!-- 空白页 -->
		<empty v-if="!balanceList || balanceList.length === 0"></empty>
		<view v-if="type === 1 && false" @click="inputShowModal" class="bottom-bar">
			<text style="color: #666666; line-height: 100upx;">立即提现</text>
		</view>
		<neil-modal style="z-index: 99;" v-if="inputShow" :show="inputShow" title="提现" @cancel="cancel" @confirm="confirm">
			<input v-model="inputContent" style="margin: 20upx" placeholder="请输入提现金额" />
		</neil-modal>
	</view>
</template>

<script>
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				balanceList: [],
				loadingType: 'more',
				pageNo: 1,
				pageSize: 10,
				inputContent: '',
				inputShow: false,
				type: undefined
			}
		},
		components: {
			neilModal,
			empty
		},
		onLoad(options) {
			this.type = parseInt(options.type)
			this.loadData();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			/* 获取列表数据 */
			loadData() {
				const that = this
				if (that.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (that.type < 3) {
					that.loadingType = 'loading';
					that.$api.request('distribution', 'balanceDetail', {
						pageNo: that.pageNo,
						pageSize: that.pageSize,
						type: that.type
					}, failres => {
						if (failres.errno === 22004) {
							// 若是说不存在分销用户，则提示用户去开通
							uni.showModal({
								title: '开通',
								content: '您还没开通分销，一键开通？',
								success: (e) => {
									if (e.confirm) {
										uni.redirectTo({
											url: '/pages/distribution/share'
										})
									}
								}
							})
						} else {
							that.$api.msg(failres.errmsg)
						}
						that.loadingType = 'noMore'
					}).then(res => {
						that.pageNo = res.data.pageNo + 1
						that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'noMore'
						res.data.items.forEach(item => {
							let obj = {}
							if (that.type === 1) {
								//余额增加
								obj.delta = item.balanceDelta / 100.0
								obj.description = item.description
								obj.gmtCreate = item.gmtCreate
								obj.orderNo = item.orderNo
								obj.info = '余额 ' + ((item.balanceDelta > 0) ? '+' : '') + (item.balanceDelta / 100.0) + ', 冻结余额 ' + ((item.freezeBalance >
									0) ? '+' : '') + (item.freezeBalance / 100.0)
								that.balanceList.push(obj)
							} else if (that.type === 2) {
								//余额增加
								obj.delta = item.freezeBalanceDelta / 100.0
								obj.description = item.description
								obj.gmtCreate = item.gmtCreate
								obj.orderNo = item.orderNo
								obj.info = '余额 ' + ((item.balanceDelta > 0) ? '+' : '') + (item.balanceDelta / 100.0) + ', 冻结余额 ' + ((item.freezeBalance >
									0) ? '+' : '') + (item.freezeBalance / 100.0)
								that.balanceList.push(obj)
							}
						})
					})
				} else {
					// 提现明细
					that.$api.request('distribution', 'withdrawDetail', {
						pageNo: that.pageNo,
						pageSize: that.pageSize
					}, failres => {
						if (failres.errno === 22004) {
							// 若是说不存在分销用户，则提示用户去开通
							uni.showModal({
								title: '开通',
								content: '您还没开通分销，一键开通？',
								success: (e) => {
									if (e.confirm) {
										uni.redirectTo({
											url: '/pages/distribution/share'
										})
									}
								}
							})
						} else {
							that.$api.msg(failres.errmsg)
						}
						that.loadingType = 'noMore'
					}).then(res => {
						that.pageNo = res.data.pageNo + 1
						that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'noMore'
						res.data.items.forEach(item => {
							let obj = {}
							//余额增加
							obj.delta = item.sum / 100.0
							obj.description = '提现（' + (item.status === 0 ? '待审核' : (item.status === 1 ? '已到账' : '拒绝')) + '）'
							obj.gmtCreate = item.gmtCreate
							obj.info = '用户提现'
							that.balanceList.push(obj)
						})
					})
				}

			},
			cancel() {
				this.inputShow = false
			},
			inputShowModal(feild) {
				this.inputShow = true
				this.inputContent = ''
			},
			confirm() {
				const that = this
				if (!that.inputContent) {
					that.$api.msg('输入不能为空')
					return
				}
				let reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^[1-9]$)|(^\d\.[1-9]{1,2}$)|(^\d\.[0]{1}[1-9]{1}$|(^\d\.[1-9]{1}[0]{1}$)$)/;
				if (reg.exec(that.inputContent)) {
					const sum = parseInt(parseFloat(that.inputContent) * 100)
					if (sum < 100) {
						that.$api.msg('提现金额不能低于1元')
						that.inputShow = false
						return
					}
					that.$api.request('distribution', 'withdraw', {
						distributionId: that.userInfo.distributionId,
						sum: sum
					}, failres => {
						that.$api.msg(failres.errmsg)
						that.inputShow = false
					}).then(res => {
						that.userInfo[that.feild] = that.inputContent
						that.inputContent = ''
						that.$store.commit('login', that.userInfo)
						that.inputShow = false
						that.$api.msg('提现申请已成功，请耐心等待')
					})
				} else {
					that.$api.msg('请输入金额数字')
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.balance-inc {
		color: #FF8247;
		font-weight: bold;
		font-size: 40upx;
	}

	.freeze-balance-inc {
		color: #1E90FF;
		font-weight: bold;
		font-size: 40upx;
	}

	/* 列表 */
	.list {
		padding-bottom: 100upx;
		background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform: scaleY(0.5);
				/* 1px像素 */
			}
		}
	}

	.bottom-bar {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0px;
		background: #EEEEEE;
		align-items: center;
		text-align: center;
	}
</style>
